<template>
  <div class="list_address">
    <div class="item_address" v-for="(o, i) in list" :key="i">
      <div class="address_info">
        <div class="top_info">
          <span>{{ o[vm.name] }}</span>
          <span>{{ o[vm.phone] }}</span>
        </div>
        <div class="body_info">
          <span>{{ o[vm.address] }}</span>
        </div>
      </div>
      <div class="bar_btn">
        <div
          class="default_btn"
          :class="{ active: activeIndex == i }"
          @click="choose_default(o[vm.address_id], o[vm.user_id], i)"
        >
          <div class="btn_circle">
            <i
              class="fa-checkmarkempty"
              style="color: #fff; font-size: 0.3rem"
              v-if="activeIndex == i"
            ></i>
          </div>
          <span>设为默认</span>
        </div>
        <div class="right_btn">
          <span class="btn_delete" @click="del_address(o[vm.address_id], i)"
            >删除</span
          >
          <span
            @click="$nav('./address_edit?address_id=' + o[vm.address_id])"
            class="btn_set"
            >修改</span
          >
        </div>
      </div>
    </div>
    <button class="add_address" @click="$nav('./address_edit')" type="default">
      添加收获地址
    </button>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    vm: {
      type: Object,
      default: function () {
        return {
          name: "name",
          phone: "phone",
          address: "address",
          user_id: "user_id",
          address_id: "address_id",
        };
      },
    },
  },
  data() {
    return {
      activeIndex: false,
    };
  },
  methods: {
    // 选择默认地址
    choose_default(address_id, user_id, index) {
      this.activeIndex = index;
      this.$post(
        `~/api/address/set?user_id=${user_id}`,
        {
          default: 0,
        },
        (res) => {
          console.log(res);
        }
      );
      this.$post(
        `~/api/address/set?user_id=${user_id}&address_id=${address_id}`,
        {
          default: 1,
        },
        (res) => {
          console.log(res);
        }
      );
    },
    // 删除
    del_address(address_id, index) {
      this.$get(
        "~/api/address/del",
        {
          address_id,
        },
        (res) => {
          this.list.splice(index, 1);
        }
      );
    },
  },
};
</script>

<style>
.list_address {
  font-size: 0.8rem;
}

.item_address {
  background-color: #fff;
  padding: 0 0.8rem;
  margin-bottom: 0.8rem;
}

.address_info {
  border-bottom: 1px solid #eee;
  padding: 0.8rem 0;
}

.top_info {
  margin-bottom: 0.5rem;
}

.bar_btn {
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color_grey);
  cursor: pointer;
}
.right_btn {
  display: flex;
}
.btn_delete {
  margin: 0;
  margin-right: 1.3rem;
}
.btn_set {
  padding: 0;
  margin: 0;
}
.default_btn {
  display: flex;
  align-items: center;
}

.btn_circle {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--color_grey);
}

.default_btn.active {
  color: var(--color_primary);
}

.default_btn.active .btn_circle {
  background-color: var(--color_primary);
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.add_address {
  color: var(--color_primary);
  margin: 0.5rem;
}
</style>
